<template>
  <div>
    <el-card>
      <template #header>
        发布失物列表
      </template>
      <el-empty v-if="lostItemPage.list.length===0" description="暂无数据"></el-empty>
      <el-space wrap>
        <lost-found-card :can-edit="isOwner" v-for="item in lostItemPage.list" :key="item.lostItemId"
                         type="lost" :lostFoundItem="item" @edit="goLostEdit" @detail="goLostDetail"></lost-found-card>
      </el-space>
    </el-card>
    <el-card style="margin-top: 20px">
      <template #header>
        发布拾物列表
      </template>
      <el-empty v-if="foundItemPage.list.length===0" description="暂无数据"></el-empty>
      <el-space wrap>
        <lost-found-card :can-edit="isOwner" v-for="item in foundItemPage.list" :key="item.foundItemId" type="found"
                         :lostFoundItem="item" @edit="goFoundEdit" @detail="goFoundDetail"></lost-found-card>
      </el-space>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import {computed, onMounted, reactive, ref} from "vue";
import {useUserStore} from "@/stores/user";
import {useRoute, useRouter} from "vue-router";
import {reqGetFoundItemPage, reqGetLostItemPage} from "@/api/serve/lost";
import LostFoundCard from "@/components/card/LostFoundCard.vue";

/*通用*/
let route = useRoute();
let router = useRouter();
let userStore = useUserStore();
let isOwner = computed(() => {
  return userStore.userId == route.params.userId
});
/*失物*/
let lostItemQuery = reactive({
  pageNum: 1,
  pageSize: 10,
  userId: userStore.userId,
})
let lostItemPage = reactive({
  pageNum: 1,
  total: 0,
  list: []
})
let getLostItemPage = async () => {
  let res = await reqGetLostItemPage(lostItemQuery)
  Object.assign(lostItemPage, res.data)
}
let goLostEdit = (itemId) => {
  router.push({
    name: 'lost-found-edit',
    params: {
      itemId
    },
    query: {
      type: 'lost'
    }
  })
}
let goLostDetail = (itemId) => {
  router.push({
    name: 'lost-detail',
    params: {
      itemId
    },
    query: {
      type: 'lost'
    }
  })
}
/*拾物*/
let foundItemQuery = reactive({
  pageNum: 1,
  pageSize: 10,
  userId: userStore.userId,
})
let foundItemPage = reactive({
  pageNum: 1,
  total: 0,
  list: []
})
let getFoundItemPage = async () => {
  let res = await reqGetFoundItemPage(foundItemQuery)
  Object.assign(foundItemPage, res.data)
}
let goFoundEdit = (itemId) => {
  router.push({
    name: 'found-edit',
    params: {
      itemId
    },
    query: {
      type: 'found'
    }
  })
}
let goFoundDetail = (itemId) => {
  router.push({
    name: 'found-detail',
    params: {
      itemId
    },
    query: {
      type: 'found'
    }
  })
}
/*初始化*/
onMounted(() => {
  getLostItemPage()
  getFoundItemPage()
})
</script>

<style scoped>

</style>
